import React from 'react';
import '@/components/Sider/Sider.scss'
import type { MenuProps } from 'antd';
import { Menu, Layout } from 'antd';
import { EnvironmentOutlined,
    PictureOutlined,
    UserOutlined,
    ShoppingOutlined,
    DatabaseOutlined,
    EditOutlined,
    FileExcelOutlined,
    TableOutlined,
    PieChartOutlined,
    FormOutlined,
    GlobalOutlined,
    DownloadOutlined,
    UploadOutlined
 } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { useDispatch } from 'react-redux'
import { useState } from 'react';
import { useSelector } from "react-redux";

interface Props {

}

function Sider(props: Props) {
    let navigate = useNavigate()
    let dispatch = useDispatch()

    let url = useSelector((newstate: any) => newstate.keyPath)
    let urlOut = url[0]
    let urlIn
    if (url.length == 2) {
        urlIn = url[1]
    } else {
        urlIn = url[0]
    }
    
    // const [collapsed, setCollapsed] = useState(false);

    // 获取侧边导航展开-收起的状态
    let collapsed = useSelector((newstate: any) => newstate.collapsed)


    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }
    type MenuItem = Required<MenuProps>['items'][number];
    const items: MenuItem[] = [
        getItem('首页', '/index/home'),
        getItem('轮播图管理', 'sub1', <PictureOutlined />, [
            getItem('轮播图列表', '/index/swiper',<TableOutlined />),
        ]),
        getItem('账号管理', 'sub2', <UserOutlined />, [
            getItem('管理员列表', '/index/users',<TableOutlined />)
        ]),
        getItem('产品管理', 'sub3', <ShoppingOutlined />, [
            getItem('产品列表', '/index/products',<TableOutlined />),
            getItem('秒杀列表', '/index/seckill',<TableOutlined />),
            getItem('推荐列表', '/index/recommend',<TableOutlined />),
            getItem('筛选列表', '/index/screen',<TableOutlined />),
        ]),
        getItem('数据可视化', 'sub4', <DatabaseOutlined />, [
            getItem('echarts使用', '/index/echarts',<PieChartOutlined />)
        ]),
        getItem('编辑器', 'sub5', <FormOutlined />, [
            getItem('富文本编辑器', '/index/editors',<EditOutlined />)
        ]),
        getItem('Excel管理', 'sub6', <FileExcelOutlined />, [
            getItem('excel导入', '/index/in',<UploadOutlined />),
            getItem('excel导出', '/index/out',<DownloadOutlined />),
        ]),
        getItem('地图管理', 'sub7', <GlobalOutlined />, [
            getItem('百度地图', '/index/maps',<EnvironmentOutlined />)
        ]),
    ];
    let handleClick = ({ key, keyPath }: any) => {
        // console.log(key,keyPath);
        dispatch({ type: 'SAVE_KEYPATH', payload: keyPath })
        navigate(key)
    }

    // 只展开当前父级菜单
    const rootSubmenuKeys = ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7'];
    const [openKeys, setOpenKeys] = useState([urlOut]);
    let openChange = (keys: any) => {
        const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }

    }


    // 展开-收起的回调函数
    let collapsedChange=(value:any)=>{
        console.log(value);
        
    }

    return (
        <Layout.Sider className='sider' collapsed={collapsed} >
            <div className='userinfo'>
                <img src="https://img0.baidu.com/it/u=3810945185,2793085772&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300" alt="" />
                <span className='name'>嗨购管理系统</span>
            </div>
            <Menu className='list_item'
                defaultSelectedKeys={['/index/home']}
                selectedKeys={urlIn} 
                openKeys={openKeys}
                mode="inline" items={items} 
                onClick={handleClick} 
                onOpenChange={openChange} 
                />
        </Layout.Sider>
    );
}

export default Sider;